<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <p class="pty">111111</p>

    </div>
    <script>
        let box = document.querySelector(".box")
        let ps = document.createElement("p")
        ps.innerText = "我是新结点";
        // insertBefore("要插入的节点","参照节点(哪个节点前)")
        // 父级.insertBefore("要插入的节点","参照节点(哪个节点前)")
        let pty = document.querySelector(".pty")
        // let p  = document.createElement(ps)
        box.insertBefore(ps,pty)


        // let ps = document.createElement("p"); //创建一个p标签
        // ps.innerText = "w我是ppp"; //给新创建的标签 设置内部文本   
        // box.appendChild(ps)
        // console.log(ps)
        
        // 用户输入内容  用h1标签显示在box中
        // let a = prompt("请输入要写的内容")
        // let h1 = document.createElement("h1")
        // h1.innerText = a
        // box.appendChild(h1)

        // let namelist = ["张三","李四","王五","老张","老王","小李"]
        // 根据元素数量生成对应的p标签   顺序添加到box中
        // for(let i=0;i<namelist.length;i++){
        //     let p = document.createElement("p")
        //     p.innerText = namelist[i]
        //     box.appendChild(p)
            
        // }


        // document.createElement("创建好的节点")
        // 返回的是  创建好的节点
        // appendChild()   将创建好的节点 添加到调用者 内部的  最后一个
        // 父级.appendChild("要添加的节点")
        //insertBefore()  将创建好的节点添加到参照节点的前面
        // 父级.insertBefore("要插入的节点","参照节点(哪个节点前)")
        // 节点.innerText = "内容" 
        // 给节点设置文本

    </script>
</body>
</html>